<template>
    <div>
        <div class="panel panel-default article-body">
            <div v-if="loading">loading...</div>
            <div v-if="!loading">
                <div class="article-title">{{article.title}}</div>
                <div class="article-head">
                    作者:{{article.author}} 发表于：{{article.created_at}} 浏览量：{{article.visit}}

                </div>
                <template v-for="label in labels" v-if="!labelLoading">
                    <label class="capsule"><a>{{label.name}}</a></label>
                </template>
                <div class="article-text" v-html="compile_md"></div>
            </div>
        </div>

    </div>
</template>

<script>
    export default{
        data(){
            return {
                article: null,
                labels: null,
                loading: false,
                labelLoading: false
            }
        },
        created(){
            this.getArt();
            this.getLabel();
        },
        methods: {
            getArt(){
                var vm = this;
                vm.loading = true;
                $.get("api/getArt?id=" + vm.$route.params.id, function (json) {
                    vm.loading = false;
                    vm.article = $.parseJSON(json);
                })
            },
            getLabel(){
                var vm = this;
                vm.labelLoading = true;
                $.get("api/getLabel?id=" + vm.$route.params.id, function (json) {
                    vm.labelLoading = false;
                    vm.labels = $.parseJSON(json);
                })
            }
        },
        computed: {
            compile_md() {
                var converter = new showdown.Converter();
                // 支持显示如同github的勾选框，默认false
                // ep: - [x] This task is done
                converter.setOption("tasklists", true);
                // 支持显示删除线，默认false
                converter.setOption("strikethrough", true);
                // 支持simpleLineBreaks，默认false
                converter.setOption("simpleLineBreaks", true);
                // 支持显示table，默认false
                converter.setOption("tables", true);
                // 支持图片大小设置，默认为false
                converter.setOption("parseImgDimensions", true);
                return converter.makeHtml(this.article.text);
                ;
            }
        }
    }
</script>